<template>
  <div v-loading="loading">
    <!-- 入账记录模块 -->
    <el-collapse-transition>
      <div
        v-show="!isShowIncomeRecord"
        class="app-main-content-box income-record"
      >
        <app-main-title title="寄存、支取记录" />
        <!--filter区域-->
        <div>
          <el-form
            ref="filterForm"
            :model="filterForm"
            label-width="100px"
            size="small"
          >
            <el-form-item
              label="寄存时间："
              :rules="[{ required: true, message: '时间区间不能为空' }]"
              prop="customParamsDate"
              style="display: inline-block"
            >
              <el-date-picker
                v-model="filterForm.customParamsDate"
                size="small"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                type="daterange"
                style="width: 250px"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                placeholder="选择日期"
              />
            </el-form-item>
            <el-form-item
              label="凭证号："
              style="display: inline-block"
              prop="orderCode"
            >
              <el-input
                v-model="filterForm.orderCode"
                placeholder="请输入凭证号"
                style="width: 250px"
              />
            </el-form-item>
            <el-form-item
              label="寄存门店："
              style="display: inline-block"
              prop="shopId"
            >
              <el-select
                v-model="filterForm.shopId"
                filterable
                placeholder="可通过名称搜索"
                style="width: 250px"
              >
                <el-option
                  v-for="(item, index) in $store.state.user
                    .allManageShopFilterOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="支取门店："
              style="display: inline-block"
              prop="takeShopId"
            >
              <el-select
                v-model="filterForm.takeShopId"
                filterable
                placeholder="可通过名称搜索"
                style="width: 250px"
              >
                <el-option
                  v-for="(item, index) in $store.state.user
                    .allManageShopFilterOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="寄存仓库："
              style="display: inline-block"
              prop="warehouse"
            >
              <el-input
                v-model="filterForm.warehouse"
                placeholder="请输入寄存仓库"
                style="width: 250px"
              />
            </el-form-item>
            <!-- 筛选 -->
            <div class="app-main-filter-collapse-box filter">
              <el-collapse>
                <el-collapse-item
                  ref="filterCollapse"
                  title="按条件筛选"
                  name="1"
                >
                  <el-form-item label="订单状态：" prop="status">
                    <el-radio-group v-model="filterForm.status">
                      <el-radio label="all">全部</el-radio>
                      <el-radio :label="0">待支取</el-radio>
                      <el-radio :label="1">已支取</el-radio>
                      <el-radio :label="2">已过期</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-collapse-item>
              </el-collapse>
            </div>

            <el-form-item class="filter-btn">
              <el-button
                type="primary"
                round
                @click="submitForm('filterForm')"
              >查 询</el-button>
              <el-button
                round
                @click="resetForm('filterForm')"
              >重 置</el-button>
              <el-button
                v-if="!$store.getters.banBtnList.includes('BTN_DEPOSIT_ORDERS')"
                round
                @click="downExcel"
              >导 出</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <!-- 统计卡片 start -->
          <div>
            <AppTableStatisticsCard :statistics-card-data="statisticsCardData" />
          </div>
          <!-- 统计卡片 end -->

          <!-- 表格内容 -->
          <div class="list-table">
            <el-table
              size="small"
              :data="list"
              border
              stripe
              style="width: 100%"
              empty-text="暂无数据"
            >
              <el-table-column
                prop="createTime"
                label="寄存时间"
                align="center"
                width="150"
              />
              <el-table-column
                prop="code"
                label="凭证号"
                align="center"
                width="150"
              />
              <el-table-column
                prop="subStatus"
                label="寄存状态"
                align="center"
                width="100"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.status === 0">待支取</span>
                  <span v-if="scope.row.status === 1">已支取</span>
                  <span v-if="scope.row.status === 2">已过期</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="shopName"
                label="寄存门店"
                align="center"
              />
              <el-table-column
                prop="takeShopName"
                label="支取门店"
                align="center"
              />
              <el-table-column
                prop="warehouseName"
                label="仓库"
                align="center"
              />
              <el-table-column
                prop="expireTime"
                align="center"
                label="到期日期"
              >
                <template slot-scope="scope">
                  <span>
                    {{
                      scope.row.expireTime ? scope.row.expireTime : "永久有效"
                    }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="takeTime"
                align="center"
                label="支取时间"
              />
              <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="100"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="mini"
                    round
                    @click="goDetail(scope.row)"
                  >详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <pagination-direction
              v-if="paginationConfig.total !== 0"
              :config="paginationConfig"
              @sizeschange="sizesChange"
              @pagechange="pageChange"
            />
          </div>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import { downDepositRecords } from '@/api/download'
import { getDepositOrderCount, getDepositOrderList } from './api/statement'
export default {
  components: {},
  data() {
    return {
      // 配置
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      selectOptions: [
        {
          value: 'payNo',
          label: '交易单号'
        }
      ],
      searchSelect: 'payNo', // 搜索的类型
      // 状态
      loading: false, // 表格loading
      isShowIncomeRecord: false,
      // 数据
      statisticsCardData: [],
      list: [], // 表格数据
      filterForm: {
        status: 'all',
        shopId: '',
        takeShopId: '',
        customParamsDate: [
          this.$momentMini().format('YYYY-MM-DD'),
          this.$momentMini().format('YYYY-MM-DD')
        ]
      },
      shopAllData: []
    }
  },
  watch: {},
  mounted() {
    this.fetchData() // 加载页面
  },
  methods: {
    /**
       *  获取数据
       */
    // 获取记录
    fetchData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      this.$refs.filterForm.validate((valid) => {
        if (valid) {
          const params = this.setRequestParams(page, pageSize)
          this.loading = true
          Promise.all([this.getList(params), this.getCount(params)]).then(
            (res) => {
              this.loading = false
            }
          )
        }
      })
    },

    // 获取筛选数据
    setRequestParams(page = 1, pageSize = 10) {
      let params = {}
      params = Object.assign({}, this.filterForm)
      params.page = page
      params.pageSize = pageSize
      params.start = params.customParamsDate[0] + ' 00:00:00'
      params.end = params.customParamsDate[1] + ' 23:59:59'
      delete params.customParamsDate
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      return params
    },

    // 获取列表
    getList(params) {
      return new Promise((resolve, reject) => {
        getDepositOrderList(params)
          .then((res) => {
            this.list = res.data.list
            this.paginationConfig.total = res.data.total
            this.paginationConfig.page = res.data.pageNum
          })
          .finally(() => {
            resolve()
          })
      })
    },

    // 获取统计
    getCount(params) {
      return new Promise((resolve, reject) => {
        if (params.page !== 1) {
          resolve()
        } else {
          this.statisticsCardData = [
            {
              title: '待支取 / 条',
              value: 0,
              describeList: [],
              detailList: []
            },
            {
              title: '已支取 / 条',
              value: 0,
              describeList: [],
              detailList: []
            },
            {
              title: '已过期 / 条',
              value: 0,
              describeList: [],
              detailList: []
            }
          ]
          getDepositOrderCount(params)
            .then((res) => {
              this.statisticsCardData[0].value = res.data[0]
              this.statisticsCardData[1].value = res.data[1]
              this.statisticsCardData[2].value = res.data[2]
            })
            .finally(() => {
              resolve()
            })
        }
      })
    },

    // 分页sizes改变
    sizesChange() {
      this.fetchData()
    },

    // 分页page改变
    pageChange() {
      this.fetchData()
    },

    /**
       * 按钮组
       */
    // 导出
    downExcel() {
      this.$refs.filterForm.validate((valid) => {
        if (valid) {
          const params = this.setRequestParams()
          delete params['page']
          delete params['pageSize']
          downDepositRecords(params)
            .then((res) => {
              if (res.code === 0) {
                this.$alert(
                  '数据导出中，请稍后到数据下载中心进行下载',
                  '提示',
                  {
                    confirmButtonText: '确定',
                    center: true,
                    type: 'success',
                    callback: (action) => {}
                  }
                )
              }
            })
            .catch((err) => {})
        }
      })
    },

    // 查询
    submitForm() {
      this.fetchData(1)
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    // 跳转详情
    goDetail(row) {
      this.$router.push({
        name: 'DepositOrderDetail',
        query: { page: 'DepositOrderRecord', orderCode: row.code }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .filter-btn {
    margin-bottom: 20px;
  }
  /* 换行 */
  .el-radio + .el-radio {
    margin-left: 0;
  }
  .el-radio {
    margin-right: 10px;
  }

  //数据明细显示部分
  .orderList-data-content {
    .content-item {
      padding: 15px;
      width: 24%;
      background: #e4e4e4;
      border-radius: 5px;
      margin: 20px 0;
      h3 {
        font-size: 12px;
      }
      h2 {
        font-size: 22px;
        margin: 20px 0;
      }
      span {
        color: #333;
        display: block;
        margin-bottom: 10px;
        font-size: 12px;
      }
    }
  }
</style>
